<template>
  <div class="bigscreen">
    <img class="img left" src="@/assets/screendeck/header-left.png" alt="" />
    <img class="img right" src="@/assets/screendeck/header-right.png" alt="" />
    <header>
      <ToggleButton v-model="time" />
      <h1 class="title" />
      <TimeShow :refresh="currentTime"  />
    </header>

    <aside class="left">
      <ServiceInfo :time="parseTimeData" :code="code" :refresh="currentTime" />
      <ServiceInvoke :time="parseTimeData" :code="code" :refresh="currentTime" />
      <ServiceOrgInvoke :time="parseTimeData" :code="code" :refresh="currentTime" />
    </aside>

    <main>
      <CountBar :time="parseTimeData" :code="code" :refresh="currentTime" />
      <MapView  :time="parseTimeData" v-model="areaCode" :refresh="currentTime" :areas="areaList" />
      <AreaInvoke :time="parseTimeData" :code="code" :refresh="currentTime" :areas="areaList" />
    </main>

    <aside class="right">
      <EventInfo  :time="parseTimeData" :code="code" :refresh="currentTime" />
      <EventInvoke :time="parseTimeData" :code="code" :refresh="currentTime" />
      <EventIOrgnvoke :time="parseTimeData" :code="code" :refresh="currentTime" />
      
    </aside>
    <footer />
  </div>
</template>

<script>
import ServiceInfo from './components/ServiceInfo'
import EventInfo from './components/EventInfo'
import ServiceOrgInvoke from './components/ServiceOrgInvoke'
import ServiceInvoke from './components/ServiceInvoke.vue'
import EventIOrgnvoke from './components/EventIOrgnvoke'
import EventInvoke from './components/EventInvoke.vue'
import CountBar from './components/CountBar.vue'
import MapView from './components/MapView'
import AreaInvoke from './components/AreaInvoke'
import TimeShow from './components/TimeShow.vue'
import ToggleButton from './components/ToggleButton.vue'
import { ref, watch, onMounted, onBeforeMount, onBeforeUnmount, computed } from 'vue'
import { parseTime } from '@/utils'
import { getArea } from "@/api/dict";
export default {
  name: 'Bigscreen',
  components: {
    ServiceInfo,
    EventInfo,
    ServiceOrgInvoke,
    ServiceInvoke,
    EventIOrgnvoke,
    EventInvoke,
    CountBar,
    MapView,
    AreaInvoke,
    TimeShow,
    ToggleButton
  },
  setup(props) {
    const time = ref([])
    const areaCode = ref('330300')
    const parseTimeData = ref({
      endDate: null,
      startDate: null
    })
    const changeTime = () => {
      if (!time.value || Object.keys(time.value).length == 0) {
        parseTimeData.value = {
          startDate: null,
          endDate: null
        }
      } else {
        parseTimeData.value = {
          startDate: time.value[0] ? parseTime(time.value[0],'{yy}-{mm}-{dd} 00:00:00') : null,
          endDate: time.value[1] ? parseTime(time.value[1],'{yy}-{mm}-{dd} {h}:{i}:{s}') : null
        }
      }
      currentTime.value = new Date().getTime()
    }
    const currentTime = ref(null) // 组件通过判断时间是否改变进行数据重新读取
    const refreshTimer = ref(null)
    const areaList = ref([])
    const getAreaList = async (para) => {
      const res = await getArea(para);
      areaList.value = res.data;
    };
    watch(() => time.value, (val) => {
      changeTime()
    })
    // 为了满足选温州市的时候传空的 后端的要求
    const code = computed(() => {
      return areaCode.value=='330300'?'':areaCode.value
    })
    onBeforeMount(() => {
      clearInterval(refreshTimer.value)
      refreshTimer.value = null;
    })
    
    onMounted(() => {
      getAreaList()
      const start = new Date();
      const end = new Date(new Date(new Date().toLocaleDateString()).getTime()-1);
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      time.value = [start, end]
    });
    onBeforeUnmount(() => {
      clearInterval(refreshTimer.value)
      refreshTimer.value = null;
    })
    return {
      parseTimeData,
      time,
      areaCode,
      currentTime,
      areaList,
      code
    }
  }
}
</script>

<style lang="scss" scoped>
.bigscreen {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 22vw 56vw 22vw;
  grid-template-rows: calc(100vw / 20) calc(100% - 1920px / 12 ) calc(100vw / 28);
  grid-template-areas: 'header header header'
    'left main right'
    'footer footer footer'
  ;
  grid-gap: 0 14px;
  background: #000616;
  box-sizing: border-box;
  align-content: space-around;
  &>* {
    box-sizing: border-box;
  }

  background-image: url(@/assets/screendeck/background.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 77% auto;
  .title {
    width: 60%;
  }
  >.img {
    width: 224px;
    height: 307px;
    position: fixed;

    &.left {
      width: 245px;
      top: 0;
      left: 0;
    }

    &.right {
      top: 0;
      right: 0;
    }
  }

  &>footer {
    grid-area: footer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #fff;
    font-weight: 800;
    background-image: url(@/assets/screendeck/footer.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
  }

  &>header {
    grid-area: header;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #fff;
    font-weight: 800;
    background-image: url(@/assets/screendeck/header.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    z-index: 3;
  }

  &>aside {
    display: grid;
    grid-gap: 14px 14px;
    height: calc(100% - 14px);

    &.left {
      padding-left: 14px;
      grid-area: left;
      grid-template-columns: 100%;
      grid-template-rows: 32% 35% 35%;
    }

    &.right {
      padding-right: 40px;
      grid-area: right;
      grid-template-columns: 100%;
      grid-template-rows: 35% 32% 35%;
    }
  }

  &>main {
    grid-area: main;
    display: grid;
    grid-gap: 14px 14px;
    grid-template-columns: 100%;
    grid-template-rows: 80px calc(100% - 80px - 34%) 34.5%;
  }

  ::-webkit-scrollbar {
    width: 4px;
    height: 8px;
    background-color: #000E32;
  }

  /*定义滑块颜色+圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.2);
  }

  /*定义滚动条轨道内阴影+圆角*/
  ::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #000E32;
  }
}
</style>